<template>
  <div class="custom-pop-wrapper" ref="customPopup">
    <div class="mask" ref="mask"></div>
    <div
      class="pop-wrapper-content"
      :style="`width:${width || 500}px;`"
      ref="popWrapper"
    >
      <a-icon type="close-circle" @click="closePopup" />
      <p class="title YouSheBiaoTiHei" ref="titleWrapper">
        <txt
          :value="title"
          :params="{
            animateDuration: 0.5,
            animateType: 'waveSmall'
          }"
          ref="title"
          v-if="param.title"
        ></txt>
      </p>
      <div class="content">
        <div class="search-wrapper">
          <a-input
            placeholder="请输入企业名称"
            v-model="entName"
            @pressEnter="searchName"
          >
            <a-icon slot="prefix" type="search" />
          </a-input>
          <span class="search-btn" @click="searchName">搜索</span>
        </div>
        <div class="list-wrapper H_Regular">
          <a-table
            :columns="columns"
            :row-key="(record) => record.name"
            :data-source="listData"
            :loading="loading"
            :pagination="false"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="record">
              <a @click="viewDetails(record)">查看</a>
            </span>
          </a-table>
          <a-pagination
            :total="total"
            class="popupPagination"
            :page-size="pageSize"
            :default-current="1"
            size="small"
            @change="paginationChange"
          />
          <span class="popupTotal">共计： {{ total }}个相关企业</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import txt from '../default/txt.vue'
import { mapState, mapMutations } from 'vuex'
import { Input, Icon, Table, Pagination } from 'ant-design-vue'
import appStore from '@/store'
export default {
  name: 'poppup',
  components: {
    txt,
    [Input.name]: Input,
    [Icon.name]: Icon,
    [Table.name]: Table,
    [Pagination.name]: Pagination
  },
  computed: {
    ...mapState('focus', ['carousel']),
    width() {
      if (!this.desShow) {
        return 500
      }
    },
    desShow() {
      return this.param.title || this.param.describe
    },
    listData() {
      return this.defaultlistData
    },
    pageSize() {
      return appStore.state.popParams.records
    }
  },
  props: ['param'],
  data() {
    return {
      title: '企业名单',
      loading: false,
      columns: [
        { key: 'name', dataIndex: 'name', title: '企业名称', width: '350px' },
        {
          key: 'action',
          title: '查看详情',
          align: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      defaultlistData: [
        { id: 0, name: '企业名称1', detailsUrl: '' },
        { id: 1, name: '企业名称2', detailsUrl: '' },
        { id: 2, name: '企业名称3', detailsUrl: '' },
        { id: 3, name: '企业名称4', detailsUrl: '' }
      ],
      total: 4,
      entName: '',
      locale: {
        emptyText: '暂无数据'
      }
    }
  },
  mounted() {},
  methods: {
    ...mapMutations('focus', ['setCarousel']),
    show() {
      let opt = {}
      Object.assign(opt, this.param)
      this.title = this.param.title
      this.$refs['customPopup'].style.display = 'block'

      // ----------------------------
      if (this.tl) this.tl = null
      this.tl = new TimelineMax({})
      let mask = TweenMax.to(this.$refs['mask'], 0.5, { opacity: 1 })
      let popWrapper = TweenMax.to(this.$refs['popWrapper'], 0.3, {
        opacity: 1,
        height: 628
      })
      let titleWrapper = TweenMax.to(this.$refs['titleWrapper'], 0.2, {
        opacity: 1
      })

      this.$nextTick(() => {
        this.tl
          .addLabel('start', 0)
          .add(mask, 'start+=0.1')
          .add(popWrapper, 'start+=0.2')
          .add(titleWrapper, 'start+=0.3')
          .add(() => {
            if (this.tl?.reversed()) return
            if (!this.desShow) return
          }, 'start+=0.3')
        if (this.param.title) {
          this.tl.add(this.$refs.title.init(), 'start+=0.4')
        }
      })
    },
    hide() {
      if (!this.tl) return
      this.tl.eventCallback('onReverseComplete', () => {
        this.tl.autoRemoveChildren = true
        this.tl = null
        this.$refs['customPopup'].style.display = 'none'
        this.isComp = false
        app.focusServer.hideComplete()
      })
      this.tl?.timeScale(3).reverse()
    },
    openSystem(param) {
      window.open(param)
    },
    viewDetails(record) {
      window.open(record.detailsUrl)
    },
    handleTableChange() {},
    closePopup() {
      this.hide()
    },
    searchName() {
      let params = {
        name: this.entName
      }
      // appStore.commit('setPopParams', params)
      getBulianData(params)
    },
    paginationChange(page) {
      let params = {
        page: page
      }
      getBulianData(params)
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-pop-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  pointer-events: all;
  transform: scale(1.28) !important;
  transform-origin: center !important;
}
.mask {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
.pop-wrapper-content {
  position: absolute;
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 114, 255, 0.8);
  background: rgba(0, 10, 25, 0.8);
  opacity: 0;
  .title {
    display: inline-block;
    width: 295px;
    height: 55px;
    line-height: 55px;
    font-size: 30px;
    color: #fff;
    background: url('../../../../../../imgs/project-img/industrialMap/popup_title_bg.png')
      no-repeat;
    margin-left: 110px;
    text-align: center;
  }
  .content {
    position: relative;
    padding: 0 25px;
    margin-top: 20px;
    height: 553px;
    .search-wrapper {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border: 1px solid rgba(0, 132, 255, 1);
      background: rgba(16, 42, 133, 0.2);
      input {
        width: 390px;
        border: none;
        color: #fff;
      }
      span {
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        &:hover {
          color: #fff;
          text-decoration: underline;
        }
      }
    }
    .list-wrapper {
      margin-top: 20px;
    }
  }
}
.ant-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.anticon-close-circle {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease-in;
}
.anticon-close-circle:hover {
  color: rgba(255, 255, 255, 0.7);
}
.popupPagination {
  position: absolute;
  bottom: 17px;
  right: 20px;
}
.popupTotal {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
}
</style>
